import 'package:flutter/material.dart';
import 'package:xinxuan/common/appbar_util.dart';
import 'package:xinxuan/common/button_util.dart';
import 'package:get/get.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:xinxuan/common/dialogs/withdrawal_dialog.dart';
import 'package:xinxuan/controllers/my_controller/withdrawal_page_controller.dart';
import 'package:xinxuan/utils/color_util.dart';
import 'package:xinxuan/utils/refresh_util.dart';

class WithdrawalPage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: pageBgColor,
      appBar: AppBarUtil(
        title: '申请提现'
      ),
      body: GetBuilder<WithdrawalPageController>(
        init: WithdrawalPageController(),
        builder: (controller) {
          return RefreshUtil.easyRefresh(
            onLoad: () async {
              controller.onLoadWithdrawalRecordList();
            },
            slivers: [
              _withdrawalBar(controller),
              SliverToBoxAdapter(
                child: Column(
                  children: controller.withdrawalListVo.value.data!.map((item) {
                    return Container(
                      padding: EdgeInsets.symmetric(horizontal: 16.w),
                      margin: EdgeInsets.only(bottom: 12.h),
                      child: Container(
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(5.w),
                          color: bgWhiteColor
                        ),
                        padding: EdgeInsets.only(left: 12.w, right: 12.w, bottom: 12.h),
                        child: Column(
                          children: [
                            _msgItem(title: '金额', value: '${item.amount}'),
                            _msgItem(title: '卡号（后4位）', value: '${item.cardNumber}'),
                            _msgItem(title: '状态', value: '${item.statusStr}'),
                            _msgItem(title: '提现时间', value: '${item.createdAt}')
                          ],
                        ),
                      ),
                    );
                  }).toList(),
                ),
              )
            ]
          );
        },
      ),
      bottomNavigationBar: BottomAppBar(
        elevation: 0,
        child: Container(
          alignment: Alignment.center,
          padding: EdgeInsets.symmetric(horizontal: 12.w),
          height: 56.h,
          child: ButtonUtil(
            text: '我要提现', 
            fontSize: 14.sp, 
            borderRadius: 18.w, 
            height: 36.h, 
            onTop: () {
              Get.dialog(
                WithdrawalDialog(),
                barrierDismissible: true,
              );
            }
          ),
        ),
      ),
    );
  }

  Widget _withdrawalBar(WithdrawalPageController controller) {
    return SliverToBoxAdapter(child: Container(
      padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 12.h),
      child: Container(
        width: 375.w,
        height: 194.h,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(5.w),
          image: DecorationImage(
            image: AssetImage(
              'assets/images/withdrawal_bg.png'
            ),
            fit: BoxFit.fill
          )
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            _withdrawalItem('可提现金额', '${controller.withdrawalListVo.value.meta!.assets!.available}'),
            // _withdrawalItem('活动金额', '${controller.withdrawalListVo.value.meta!.assets!.estimated}'),
            _withdrawalItem('已提现金额', '${controller.withdrawalListVo.value.meta!.assets!.withdraw}', showBorder: false),
          ],
        ),
      ),
    ));
  }

  Widget _msgItem({ required String title, required String value }) {
    return Container(
      margin: EdgeInsets.only(top: 12.h),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text(
            title,
            style: TextStyle(
              color: textBlackColor,
              fontSize: 14.sp
            ),
          ),
          Text(
            value,
            style: TextStyle(
              color: textBlackColor,
              fontSize: 14.sp,
              fontWeight: FontWeight.bold
            ),
          )
        ],
      ),
    );
  }

  Widget _withdrawalItem(String title, String price, { bool showBorder = true }) {
    return Container(
      width: 343.w,
      height: 96.h,
      padding: EdgeInsets.symmetric(horizontal: 16.w),
      decoration: BoxDecoration(
        border: Border(
          bottom: showBorder ? BorderSide(
            color: bgWhiteColor_50,
            width: 1.h
          ) : BorderSide.none
        )
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            title,
            style: TextStyle(
              color: textWhiteColor,
              fontSize: 18.sp
            ),
          ),
          SizedBox(height: 6.h),
          Text.rich(
            TextSpan(
              text: '¥ ',
              style: TextStyle(
                color: textWhiteColor,
                fontSize: 14.sp,
                fontWeight: FontWeight.bold
              ),
              children: [
                TextSpan(
                  text: '$price',
                  style: TextStyle(
                    color: textWhiteColor,
                    fontSize: 18.sp,
                    fontWeight: FontWeight.bold
                  ),
                )
              ]
            )
          )
        ],
      ),
    );
  }
}